<template>
  <!-- 1先创建基本的样式 -->

  <!-- 
              1完成基本的样式
              2发送网络请求
              3实现这个组件自动聚焦=》页面dom 生成时候进行自动聚焦
                 1)ref  
          -->
  <div class="w-input">
    <div class="w-flex1">
      <input ref="inputs" :value="value" @input="getValue" @blur="blur" type="text" placeholder="请输入验证码" />
      <img  :src="img" alt="">
    </div>
    <!-- 校验 =》当这个input 没有内容 ，托镖 =》进行校验 -->
    <div class="pass" v-if="showP">请输入验证码
</div>
  </div>
</template>

<script setup  lang="ts">
import { ref,onMounted} from "vue";
import {getverifyd} from '@/http/api/login'

 //dom操作
 let inputs =ref()
 onMounted(()=>{
   console.log(inputs.value.focus() ,55558);
   
 })
//泛型 =》这个方法使用决定数据类型
let value = ref<number | string>("");

let img = ref('')
let verifyN = ref('')
// 发送网络请求
 const getver = ()=>{
    getverifyd().then((res:any)=>{
         console.log(res);
         img.value =res.image
         verifyN.value = res.datas
    })
 }
 getver()
let showP = ref<boolean>(false);
const getValue = (e: any) => {
  //   console.log(e.target.value);
  //复制
  value.value = e.target.value;
};

// 子组件给父组件数据
let emits = defineEmits(["getPassw"]);
const blur = () => {
  // console.log(55558,);

  if (value.value==verifyN.value) {
    //需要校验
   emits("getPassw", true); //
  } else {
    emits("getPassw", false);
  }
  
};
</script>

<style scoped lang="scss">
.w-input {
  width: 100%;
  border: 1px solid #c0c4cc;
  padding-left: 10px;
  border-radius: 5px;
  position: relative;
  input {
    border: none;
    outline: none;
    flex: 1;
  }
  img {
    flex: 1;
    height: 40px;

  }

  .pass {
    position: absolute;
    width: 100%;
    color: red;
    top: 30px;
    left: 0;
  }
}
.w-input:hover {
  border-color: aquamarine;
}
</style>